<template>
  <div id="user">
    <div class="content">
      <div class="head">
        <img :src="img1" alt="" />
        <span>立即登录</span>
      </div>
      <ul class="order">
        <li>
          <img :src="img2" alt="" />
          <p>电影订单</p>
        </li>
        <li>
          <img :src="img3" alt="" />
          <p>商品订单</p>
        </li>
      </ul>

      <div class="tool">
        <ul>
          <li>
            <img :src="img5" alt="" class="tool-img" />
            <span class="lable">卖座券</span>
            <img :src="img4" alt="" class="arrow" />
          </li>

          <li>
            <img :src="img6" alt="" class="tool-img" />
            <span class="lable">组合红包</span>
            <img :src="img4" alt="" class="arrow" />
          </li>

          <li>
            <img :src="img7" alt="" class="tool-img" />
            <span class="lable">余额</span>
            <span class="value"><i>￥</i>0</span>
            <img :src="img4" alt="" class="arrow" />
          </li>

          <li>
            <img :src="img8" alt="" class="tool-img" />
            <span class="lable">帮助与客服</span>
            <img :src="img4" alt="" class="arrow" />
          </li>

          <li>
            <img :src="img9" alt="" class="tool-img" />
            <span class="lable">设置</span>
            <img :src="img4" alt="" class="arrow" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import img1 from "../assets/下载 (2).png";
import img2 from "../assets/下载 (3).png";
import img3 from "../assets/下载 (4).png";
import img4 from "../assets/下载 (5).png";
import img5 from "../assets/01.png";
import img6 from "../assets/02.png";
import img7 from "../assets/03.png";
import img8 from "../assets/05.png";
import img9 from "../assets/06.png";
export default {
  name: "userInfo",
  data() {
    return {
      img1,
      img2,
      img3,
      img4,
      img5,
      img6,
      img7,
      img8,
      img9,
    };
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
}

html {
  font-size: calc(100vw / 750);
}

#user {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.content {
  width: 100%;
  height: 534rem;
  background: #f4f4f4;
  margin-bottom: 59rem;
}

.content .head {
  text-align: center;
  margin-top: -44rem;
  height: 200rem;
  padding-left: 22rem;
  padding-top: 64rem;
  background: url(../assets/bg.a5bdd690.png);
  background-size: cover;
  display: flex;
  align-items: center;
  color: #fff;
  box-sizing: border-box;
}

.content .head img {
  width: 67rem;
  height: 67rem;
  margin-right: 20rem;
  border-radius: 50%;
}

.content .head span {
  font-size: 16rem;
  color: white;
}

.content .order {
  width: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 13rem;
  height: 79rem;
  background: #fff;
  margin-bottom: 10rem;
}

.content .order li {
  width: 50%;
  height: 50rem;
}

.content .order li img {
  width: 26rem;
  height: 26rem;
}

.content .order li p {
  color: #797d82;
}

.content .tool {
  width: 100%;
  height: auto;
  background-color: #fff;
}

.content .tool ul {
  padding: 0 15rem;
  background-color: #fff;
}

.content .tool ul li {
  width: 100%;
  height: 49rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #ededed;
}

.content .tool ul li .tool-img {
  width: 20rem;
  height: 20rem;
}

.content .tool ul li span {
  flex: 1;
  font-size: 15rem;
  margin-left: 15rem;
}

.content .tool ul li .arrow {
  width: 6rem;
  height: 10rem;
}

.content .tool ul li .value {
  text-align: right;
  font-size: 15rem;
  color: #797d82;
  padding-right: 14px;
}

.content .tool ul li .value i {
  font-size: 11rem;
  font-style: normal;
}
</style>